<template>
    <view class="page">

        <view class="ing" v-if="!reqsItem.taskId">
            <!--        <view class="ing" v-if="!reqsItem.taskId"> -->
            <view class="title">
                <text class="tel">正在生成中，请耐心等待...</text>
                <text class="status">{{ reqsItem.progress ?? 0 }}%</text>
            </view>
            <view class="progress-container">
                <view class="content">
                    <uv-line-progress :percentage="reqsItem.progress ?? 0" height="4"
                        :showText="false"></uv-line-progress>
                </view>
            </view>
            <view class="tip-container">
                <view class="tip">提示：中途离开本页面不影响创作</view>
                <view class="tip">绘图完成请前往【我的】-我的作品查看结果</view>
            </view>
        </view>

        <view class="picture" v-if="reqsItem.taskId">
            <CompareImage width="686" height="686" :beforeImageUrl='picture' beforeText="修复前"
                :afterImageUrl="reqsItem?.downLoadList?.[0] ?? ''" afterText="修复后" />
        </view>
        <view class="controller" v-if="reqsItem.taskId">
            <view class="btn-container">
                <view class="item" @click="download">下载</view>
                <!-- <view class="item">修改</view> -->
            </view>
        </view>
        <uv-loading-page :loading="loading" loading-text="下载中..." font-size="24rpx"
            bgColor="rgba(0,0,0,0.5)"></uv-loading-page>

        <fab :type="fabType" />

    </view>
</template>

<script setup>
import { ref } from 'vue';
import {
    onLoad, onHide
} from '@dcloudio/uni-app'

import {
    apiGetReqsStatus
} from '@/api/defaultApi.js'

//pinia
import {
    storeToRefs
} from 'pinia'
import {
    useLoadingStore
} from "@/stores/useLoadingStore.js"

import CompareImage from '@/components/jason-compareimage/CompareImage.vue'
import { downloadImg } from "@/utils/utils.js";

// 获取pinia的数据
const LoadingStore = useLoadingStore()

// 从pinia的数据中结构出值并做响应式
const {
    loading
} = storeToRefs(LoadingStore)





//图片
const picture = ref('')
const id = ref('')
//任务结果对象
const reqsItem = ref({
    "id": null,
    "resultImages": null,
    "downLoadList": null,
    "progress": null,
    "type": null,
    "taskId": null,
    "resultStatistics": null,
    "status": null,
    "extend": null
})

//定时器
const count = ref(100000)

const fabType = ref('index')


onLoad((option) => {
    //接收任务id
    id.value = option.id
    // #ifdef H5
    picture.value = option.img
    // #endif

    // #ifndef H5
    picture.value = option.img + '?x-oss-process=style/ct_nowatermark'
    //#endif

    const timer = setInterval(() => {
        getReqsStatus()
        count.value = count.value - 1

        if (reqsItem.value.taskId || count.value == 0) {
            clearInterval(timer)
        }

    }, 3000)
})





// 获取生成图片任务状态
const getReqsStatus = async () => {
    let res = await apiGetReqsStatus({
        id: id.value,
        type: 'img2img'
    })
    reqsItem.value = res.data
    if (reqsItem.value.progress == 100) {
        fabType.value = 'user'
    }
}

//下载图片
const download = async () => {
    LoadingStore.setLoading(true)
    downloadImg(reqsItem.value.downLoadList[0])
}

// 监听页面隐藏
onHide(() => {
    LoadingStore.setLoading(false)
    count.value = 0
})


</script>

<style lang="scss" scoped>
.ing {
    margin: 284rpx auto 0;
    width: 480rpx;

    .title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 22rpx;
        line-height: 22rpx;
        font-size: 22rpx;
        color: #e6e6e6;
        font-weight: 400;
        margin-bottom: 20rpx;
    }

    .progress-container {
        width: 100%;
        height: 32rpx;
        background: linear-gradient(0deg, #ff8a63 0%, #ffde7d 100%);
        border-radius: 5rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .content {
            height: 28rpx;
            width: calc(100% - 4rpx);
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 12rpx;

            &:deep(.uv-line-progress) {

                // .uv-line-progress__background{
                //     background: linear-gradient(0deg,#ff8a63 0%, #ffde7d 100%) !important;
                // }
                .uv-line-progress__line {
                    background: linear-gradient(0deg, #ff8a63 0%, #ffde7d 100%) !important;
                }
            }
        }
    }
    
    .tip-container{
        margin-top: 200rpx;
        .tip{
            color: #fff;
            font-size: 24rpx;
            line-height: 40rpx;
            width: 100%;
            display: flex;
            justify-content: center;
        }
    }
}

.picture {
    width: 100%;
    height: 686rpx;
    margin-top: 32rpx;
    background: #191919;
    border-radius: 20rpx;
    overflow: hidden;

    .pic {
        width: 100%;
        height: 100%;
    }
}

.controller {
    width: 100%;
    background: #000;
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    padding: 0 32rpx;
    box-sizing: border-box;
    margin: 60rpx 0;

    .btn-container {
        margin: 6rpx;
        width: 100%;
        display: flex;
        // justify-content: space-between;
        justify-content: center;

        .item {
            // width: 335rpx;
            width: 600rpx;
            height: 66rpx;
            background: #e6e6e6;
            border-radius: 15rpx;
            font-size: 24rpx;
            font-weight: 500;
            color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .comparison {
        height: 48rpx;
        width: 100%;
        margin-top: 47rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .comparisom-icon {
            width: 48rpx;
            height: 48rpx;
            margin-right: 14rpx;
        }

        .comparisom-text {
            font-size: 20rpx;
            font-weight: 500;
            color: #999999;
        }
    }
}
</style>
